import React, { Component } from 'react';
// 封装饼形图组件
import * as echarts from 'echarts';
// 引入对应页面额样式
import '@/assets/css/welcome.css'
// 引入时间
import moment from 'moment';
// 引入参数属性校验模块
import Pts from 'prop-types'
class Pie extends Component {
    static defaultProps = {
        w: '25%',
        h: '320',
        legend: true,
    }
    static propTypes = {
        id: Pts.string.isRequired,
        text: Pts.string.isRequired,
        data: Pts.array.isRequired
    }
    render() {
        var chartDom = document.getElementById(this.props.id);
        if (chartDom) {
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: this.props.text,
                    subtext: moment().format('YYYY-MM-DD'),
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}:{c}<br/>{d}%'
                },
                series: [
                    {
                        name: this.props.name,
                        type: 'pie',
                        radius: '60%',
                        data: this.props.data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 判断是否添加
            if (this.props.legend) {
                option.legend = {
                    orient: 'vertical',
                    left: 'left'
                }
            }
            option && myChart.setOption(option);
        }
        return (
            <div id={this.props.id} style={{ width: this.props.w, height: this.props.h + 'px' }}>

            </div>
        );
    };
    componentDidMount() {


    }
}

export default Pie;
